<template>
  <div class="el-custom-from">
    <el-tabs v-model="fieldname" class="node-tabs-kts" v-loading="loading">
      <el-tab-pane name="field">
        <template #label>
          <div>
            <span class="font_16px font_Title">
              <i class="el-icon-edit"></i>
              {{ this.$t("formi18n.from_field_propety_name") }}
            </span>
          </div>
        </template>
        <div id="From_div_style" :style="autoHeight">
          <el-container>
            <el-main id="el-custom-form-main">
              <div class="flowproperty-container container" :style="contentHeight">
                <el-form
                  ref="fieldpropety"
                  :model="field"
                  label-width="100px"
                  class="demo-ruleForm"
                  size="mini"
                  :rules="
                    !area.areaCode == 'form_apply_employeebasicinfo'
                      ? rules
                      : []
                  "
                >
                  <el-col style="width:50%">
                    <el-form-item
                      size="small"
                      :label="$t('formi18n.field_property_fieldCode')"
                      prop="fieldCode"
                      label-width="120px"
                      class="el-from-custom-item"
                    >
                      <el-input v-model="field.fieldCode" :disabled="1 == 1"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col style="width:50%">
                    <el-form-item
                      size="small"
                      :label="$t('formi18n.field_property_fieldKey')"
                      prop="fieldKey"
                      label-width="120px"
                      class="el-from-custom-item"
                    >
                      <el-input v-model="field.fieldKey" :disabled="1 == 1"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col style="width:50%">
                    <el-form-item
                      size="small"
                      :label="$t('formi18n.field_property_fieldCnName')"
                      prop="cnName"
                      label-width="120px"
                      class="el-from-custom-item"
                    >
                      <el-input v-model="field.cnName"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col style="width:50%">
                    <el-form-item
                      size="small"
                      :label="$t('formi18n.field_property_fieldEnName')"
                      prop="enName"
                      label-width="120px"
                      class="el-from-custom-item"
                    >
                      <el-input v-model="field.enName"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col style="width:50%">
                    <el-form-item
                      size="small"
                      :label="$t('formi18n.field_property_controlsType')"
                      prop="controlsType"
                      label-width="120px"
                      class="el-from-custom-item"
                    >
                      <el-select
                        v-model="field.controlsType"
                        @change="field.type = null"
                        :disabled="1 == 1"
                        style="width:100%"
                      >
                        <el-option :label="$t('formi18n.field_property_text')" value="text"></el-option>
                        <el-option :label="$t('formi18n.field_property_textarea')" value="textarea"></el-option>
                        <el-option :label="$t('formi18n.field_property_datetime')" value="datetime"></el-option>
                        <el-option :label="$t('formi18n.field_property_date')" value="date"></el-option>
                        <el-option :label="$t('formi18n.field_property_month')" value="month"></el-option>
                        <el-option :label="$t('formi18n.field_property_day')" value="day"></el-option>
                        <el-option :label="$t('formi18n.field_property_time')" value="time"></el-option>
                        <el-option :label="$t('formi18n.field_property_employee')" value="employee"></el-option>
                        <el-option
                          :label="$t('formi18n.field_property_organizational')"
                          value="organizational"
                        ></el-option>
                        <el-option :label="$t('formi18n.field_property_position')" value="position"></el-option>
                        <el-option :label="$t('formi18n.field_property_tree')" value="tree"></el-option>
                        <el-option :label="$t('formi18n.field_property_image')" value="image"></el-option>
                        <el-option :label="$t('formi18n.field_property_upload')" value="upload"></el-option>
                        <el-option
                          :label="$t('formi18n.field_property_parameter')"
                          value="parameter"
                        ></el-option>
                        <el-option :label="$t('formi18n.field_property_number')" value="number"></el-option>
                        <el-option :label="$t('formi18n.field_property_icon')" value="icon"></el-option>

                        <el-option :label="$t('formi18n.field_property_avatar')" value="avatar"></el-option>
                        <el-option :label="$t('formi18n.field_property_radio')" value="radio"></el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col style="width:50%">
                    <el-form-item
                      size="small"
                      :label="$t('formi18n.field_property_fieldType')"
                      prop="type"
                      label-width="120px"
                      class="el-from-custom-item"
                    >
                      <el-select v-model="field.type" :disabled="1 == 1" style="width:100%">
                        <el-option
                          v-if="
                            field.controlsType !== 'number' &&
                              field.controlsType !== 'date' &&
                              field.controlsType !== 'year' &&
                              field.controlsType !== 'month' &&
                              field.controlsType !== 'day' &&
                              field.controlsType !== 'time' &&
                              field.controlsType !== 'datetime' &&
                              field.controlsType !== '' &&
                              field.controlsType !== null
                          "
                          :label="$t('formi18n.field_property_varchar')"
                          value="0"
                        ></el-option>
                        <el-option
                          v-if="field.controlsType == 'number'"
                          :label="$t('formi18n.field_property_bigint')"
                          value="1"
                        ></el-option>
                        <el-option
                          v-if="field.controlsType == 'number'"
                          :label="$t('formi18n.field_property_doubled')"
                          value="2"
                        ></el-option>
                        <el-option
                          v-if="field.controlsType == 'date'"
                          :label="$t('formi18n.field_property_date')"
                          value="3"
                        ></el-option>
                        <el-option
                          v-if="field.controlsType == 'year'"
                          :label="$t('formi18n.field_property_year')"
                          value="4"
                        ></el-option>
                        <el-option
                          v-if="field.controlsType == 'month'"
                          :label="$t('formi18n.field_property_month')"
                          value="5"
                        ></el-option>
                        <el-option
                          v-if="field.controlsType == 'day'"
                          :label="$t('formi18n.field_property_day')"
                          value="6"
                        ></el-option>
                        <el-option
                          v-if="
                            field.controlsType == 'time' ||
                              field.controlsType == 'datetime'
                          "
                          :label="$t('formi18n.field_property_datetime')"
                          value="7"
                        ></el-option>
                        <el-option
                          v-if="field.controlsType == 'radio'"
                          :label="$t('formi18n.field_property_bit')"
                          value="8"
                        ></el-option>
                        <el-option :label="$t('formi18n.field_property_int')" value="9"></el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col style="width:100%">
                    <el-form-item
                      size="small"
                      :label="$t('formi18n.field_property_fieldDefaultValue')"
                      label-width="120px"
                      class="el-from-custom-item"
                    >
                      <el-input
                        v-if="
                          field.controlsType == 'text' ||
                            field.controlsType == 'textarea'
                        "
                        type="textarea"
                        :rows="5"
                        v-model="field.defaultValue"
                        :disabled="
                          area.areaCode == 'form_apply_employeebasicinfo'
                        "
                      ></el-input>
                      <el-input
                        v-if="field.controlsType == 'number'"
                        type="number"
                        style="width:43%"
                        :rows="5"
                        :max="10000"
                        :min="0"
                        v-model="field.defaultValue"
                        :disabled="
                          area.areaCode == 'form_apply_employeebasicinfo'
                        "
                      ></el-input>
                      <el-date-picker
                        v-if="field.controlsType == 'month'"
                        v-model="field.defaultValue"
                        type="month"
                        style="width:43%"
                        :placeholder="
                          $t('flowi18n.flow_line_property_datepicker_month')
                        "
                      ></el-date-picker>
                      <el-date-picker
                        v-if="field.controlsType == 'year'"
                        v-model="field.defaultValue"
                        type="year"
                        style="width:43%"
                        :placeholder="
                          $t('flowi18n.flow_line_property_datepicker_year')
                        "
                      ></el-date-picker>
                      <el-date-picker
                        v-if="
                          field.controlsType == 'date' ||
                            field.controlsType == 'day'
                        "
                        v-model="field.defaultValue"
                        type="date"
                        style="width:43%"
                        :placeholder="
                          $t('flowi18n.flow_line_property_datepicker_date')
                        "
                      ></el-date-picker>
                      <el-date-picker
                        v-if="field.controlsType == 'datetime'"
                        v-model="field.defaultValue"
                        type="datetime"
                        style="width:43%"
                        :placeholder="
                          $t('flowi18n.flow_line_property_datepicker_datetime')
                        "
                      ></el-date-picker>
                      <el-time-picker
                        v-if="field.controlsType == 'time'"
                        v-model="field.defaultValue"
                        style="width:43%"
                        :placeholder="
                          $t('flowi18n.flow_line_property_datepicker_time')
                        "
                      ></el-time-picker>
                      <el-radio-group
                        v-if="field.controlsType == 'radio'"
                        v-model="field.defaultValue"
                        size="small"
                      >
                        <el-radio-button label="0">
                          {{
                          $t("i18n.co_add")
                          }}
                        </el-radio-button>
                        <el-radio-button label="1">
                          {{
                          $t("i18n.co_edit")
                          }}
                        </el-radio-button>
                      </el-radio-group>
                      <!-- 系统控件 -->
                      <el-select
                        @remove-tag="clearValue"
                        @clear="this.field.fieldValues = []"
                        v-model="field.fieldValue"
                        multiple
                        clearable="true"
                        style="width:40%"
                        v-if="
                          field.controlsType == 'employee' ||
                            field.controlsType == 'organizational' ||
                            field.controlsType == 'position' ||
                            field.controlsType == 'parameter'||
                            field.controlsType == 'unit'
                        "
                        collapse-tags
                        :placeholder="
                          $t('formi18n.field_property_selectType_select')
                        "
                      >
                        <el-option
                          v-for="item in field.fieldValues"
                          :key="item.value"
                          :label="
                            this.$i18n.locale === 'zh-cn'
                              ? item.cnName
                              : item.enName
                          "
                          :value="item.value"
                          :disabled="1 == 1"
                        ></el-option>
                      </el-select>
                      <el-button
                        v-if="
                          field.controlsType == 'employee' ||
                            field.controlsType == 'organizational' ||
                            field.controlsType == 'position' ||
                            field.controlsType == 'parameter'||
                            field.controlsType == 'unit'
                        "
                        circle
                        icon="el-icon-plus"
                        plain
                        type="primary"
                        @click="dialogAddSystemControl(field)"
                      ></el-button>
                    </el-form-item>
                  </el-col>
                  <el-col style="width:50%" v-if="field.controlsType == 'parameter'">
                    <el-form-item
                      size="small"
                      :label="$t('formi18n.field_property_controlSouces')"
                      prop="controlSouces"
                      label-width="120px"
                      class="el-from-custom-item"
                    >
                      <el-select
                        v-model="field.controlSouces"
                        style="width:100%"
                        :disabled="1 == 1"
                      >
                        <el-option
                          v-for="(child, index) in paramters"
                          :key="index"
                          :label="
                            $i18n.locale === 'zh-cn'
                              ? child.cnName
                              : child.enName
                          "
                          :value="child.code"
                        ></el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col
                    style="width:50%"
                    v-if="
                      field.controlsType == 'parameter' ||
                        field.controlsType == 'employee' ||
                        field.controlsType == 'position' ||
                        field.controlsType == 'organizational' ||
                        field.controlsType == 'upload' ||
                        field.controlsType == 'tree'
                    "
                  >
                    <el-form-item
                      size="small"
                      :label="$t('formi18n.field_property_selectType')"
                      prop="selectType"
                      label-width="120px"
                      class="el-from-custom-item"
                      :disabled="1 == 1"
                    >
                      <el-radio-group v-model="field.selectType" size="small">
                        <el-radio-button :label="0">
                          {{
                          $t("formi18n.field_property_selectType_radio")
                          }}
                        </el-radio-button>
                        <el-radio-button :label="1">
                          {{
                          $t("formi18n.field_property_selectType_multi")
                          }}
                        </el-radio-button>
                      </el-radio-group>
                    </el-form-item>
                  </el-col>
                  <el-col style="width:50%" v-if="field.controlsType == 'number'">
                    <el-form-item
                      size="small"
                      :label="$t('formi18n.field_property_fieldmin')"
                      prop="min"
                      label-width="120px"
                      class="el-from-custom-item"
                    >
                      <el-input
                        v-model="field.min"
                        type="number"
                        :max="10000"
                        :min="0"
                        :disabled="
                          area.areaCode == 'form_apply_employeebasicinfo'
                        "
                      ></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col style="width:50%" v-if="field.controlsType == 'number'">
                    <el-form-item
                      size="small"
                      :label="$t('formi18n.field_property_fieldmax')"
                      prop="max"
                      label-width="120px"
                      class="el-from-custom-item"
                    >
                      <el-input
                        v-model="field.max"
                        type="number"
                        :max="10000"
                        :min="0"
                        :disabled="
                          area.areaCode == 'form_apply_employeebasicinfo'
                        "
                      ></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col style="width:50%" v-if="field.type == '2'">
                    <el-form-item
                      size="small"
                      :label="$t('formi18n.field_property_fieldprecisions')"
                      prop="precisions"
                      label-width="120px"
                      class="el-from-custom-item"
                    >
                      <el-input
                        v-model="field.precisions"
                        type="number"
                        :max="1000"
                        :min="1"
                        :disabled="
                          area.areaCode == 'form_apply_employeebasicinfo'
                        "
                      ></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col style="width:50%">
                    <el-form-item
                      size="small"
                      :label="$t('formi18n.field_property_required')"
                      prop="required"
                      label-width="120px"
                      class="el-from-custom-item"
                    >
                      <el-radio-group
                        v-model="field.required"
                        size="small"
                        :disabled="
                          area.areaCode == 'form_apply_employeebasicinfo'
                        "
                      >
                        <el-radio-button :label="1 == 0">
                          {{
                          $t("formi18n.field_property_selectType_unrequired")
                          }}
                        </el-radio-button>
                        <el-radio-button :label="1 == 1">
                          {{
                          $t("formi18n.field_property_selectType_required")
                          }}
                        </el-radio-button>
                      </el-radio-group>
                    </el-form-item>
                  </el-col>
                  <el-col style="width:50%">
                    <el-form-item
                      size="small"
                      :label="$t('formi18n.field_property_show')"
                      prop="show"
                      label-width="120px"
                      class="el-from-custom-item"
                    >
                      <el-radio-group v-model="field.show" size="small">
                        <el-radio-button :label="1 == 1">
                          {{
                          $t("formi18n.field_property_selectType_show")
                          }}
                        </el-radio-button>
                        <el-radio-button :label="1 == 0">
                          {{
                          $t("formi18n.field_property_selectType_hidden")
                          }}
                        </el-radio-button>
                      </el-radio-group>
                    </el-form-item>
                  </el-col>

                  <el-col style="width:50%">
                    <el-form-item
                      size="small"
                      :label="$t('formi18n.field_property_editor')"
                      prop="editor"
                      label-width="120px"
                      class="el-from-custom-item"
                    >
                      <el-radio-group
                        v-model="field.editor"
                        size="small"
                        :disabled="
                          area.areaCode == 'form_apply_employeebasicinfo'
                        "
                      >
                        <el-radio-button :label="1 == 1">
                          {{
                          $t("formi18n.field_property_edit")
                          }}
                        </el-radio-button>
                        <el-radio-button :label="1 == 0">
                          {{
                          $t("formi18n.field_property_unedit")
                          }}
                        </el-radio-button>
                      </el-radio-group>
                    </el-form-item>
                  </el-col>
                  <el-col
                    style="width:100%"
                    v-if="
                      field.controlsType !== 'image' &&
                        field.controlsType !== 'avatar'
                    "
                  >
                    <el-form-item
                      size="small"
                      :label="$t('formi18n.field_property_regulars')"
                      prop="required"
                      label-width="120px"
                      class="el-from-custom-item"
                    >
                      <el-table
                        :data="regulars"
                        style="width: 100%"
                        border
                        max-height="380"
                        size="mini"
                      >
                        <el-table-column
                          v-if="1 == 0"
                          prop="date"
                          :label="$t('formi18n.field_property_required')"
                          width="110"
                        >
                          <template #default="scope">
                            <el-select
                              v-model="scope.row.required"
                              :disabled="
                                scope.row.min > 0 ||
                                  scope.row.max > 0 ||
                                  (scope.row.pattern != null &&
                                    scope.row.pattern != '') ||
                                  area.areaCode ==
                                    'form_apply_employeebasicinfo'
                              "
                            >
                              <el-option
                                :value="null"
                                :label="
                                  $t(
                                    'formi18n.field_property_selectType_select'
                                  )
                                "
                              ></el-option>
                              <el-option
                                :label="
                                  $t(
                                    'formi18n.field_property_selectType_required'
                                  )
                                "
                                :value="1 == 1"
                              ></el-option>
                            </el-select>
                          </template>
                        </el-table-column>
                        <el-table-column
                          prop="max"
                          :label="
                            $t('formi18n.field_property_selectType_MaxLenght')
                          "
                          width="100"
                        >
                          <template #default="scope">
                            <el-input
                              v-model="scope.row.max"
                              type="number"
                              :min="1"
                              :max="99"
                              :disabled="
                                scope.row.required != null ||
                                  (scope.row.pattern != null &&
                                    scope.row.pattern != '') ||
                                  area.areaCode ==
                                    'form_apply_employeebasicinfo'
                              "
                            ></el-input>
                          </template>
                        </el-table-column>
                        <el-table-column
                          prop="min"
                          :label="
                            $t('formi18n.field_property_selectType_MinLenght')
                          "
                          width="100"
                        >
                          <template #default="scope">
                            <el-input
                              v-model="scope.row.min"
                              :min="1"
                              :max="99"
                              type="number"
                              :disabled="
                                scope.row.required != null ||
                                  (scope.row.pattern != null &&
                                    scope.row.pattern != '') ||
                                  area.areaCode ==
                                    'form_apply_employeebasicinfo'
                              "
                            ></el-input>
                          </template>
                        </el-table-column>
                        <el-table-column
                          prop="pattern"
                          :label="$t('formi18n.field_property_regulars')"
                          width="160"
                        >
                          <template #default="scope">
                            <el-input
                              type="textarea"
                              v-model="scope.row.pattern"
                              :row="6"
                              :disabled="
                                scope.row.required != null ||
                                  scope.row.min > 0 ||
                                  scope.row.max > 0 ||
                                  area.areaCode ==
                                    'form_apply_employeebasicinfo'
                              "
                            ></el-input>
                          </template>
                        </el-table-column>
                        <el-table-column
                          prop="pattern"
                          :label="$t('formi18n.field_property_tipinfo')"
                          width="162"
                        >
                          <template #default="scope">
                            <el-input
                              type="textarea"
                              v-model="scope.row.message"
                              :row="6"
                              :disabled="
                                area.areaCode == 'form_apply_employeebasicinfo'
                              "
                            ></el-input>
                          </template>
                        </el-table-column>
                        <el-table-column
                          prop="trigger"
                          :label="$t('formi18n.field_property_rules_tigger')"
                          width="110"
                        >
                          <template #default="scope">
                            <el-select
                              v-model="scope.row.trigger"
                              :disabled="
                                area.areaCode == 'form_apply_employeebasicinfo'
                              "
                            >
                              <el-option
                                :value="null"
                                :label="
                                  $t(
                                    'formi18n.field_property_selectType_select'
                                  )
                                "
                              ></el-option>
                              <el-option
                                :label="
                                  $t('formi18n.field_property_selectType_blur')
                                "
                                value="blur"
                              ></el-option>
                              <el-option
                                :label="
                                  $t(
                                    'formi18n.field_property_selectType_change'
                                  )
                                "
                                value="change"
                              ></el-option>
                            </el-select>
                          </template>
                        </el-table-column>
                        <el-table-column
                          prop="trigger"
                          :label="$t('formi18n.field_property_rules_options')"
                          width="120"
                          align="center"
                        >
                          <template #default="scope">
                            <el-button
                              type="primary"
                              icon="el-icon-plus"
                              size="mini"
                              circle
                              plain
                              @click="addRule()"
                              v-if="
                                area.areaCode !== 'form_apply_employeebasicinfo'
                              "
                            ></el-button>
                            <el-button
                              type="danger"
                              icon="el-icon-delete"
                              size="mini"
                              circle
                              plain
                              @click="deleteRule(scope)"
                              v-if="
                                area.areaCode !== 'form_apply_employeebasicinfo'
                              "
                            ></el-button>
                          </template>
                        </el-table-column>
                      </el-table>
                    </el-form-item>
                  </el-col>
                </el-form>
              </div>
            </el-main>
          </el-container>
          <el-footer>
            <div class="form_handle-box">
              <el-button
                plain
                type="primary"
                @click="SaveEvent()"
                size="mini"
              >{{ $t("table.Global_Save") }}</el-button>

              <el-button plain type="danger" @click="BackEvent()" size="mini">
                {{
                $t("table.Global_Back")
                }}
              </el-button>
            </div>
          </el-footer>
        </div>
      </el-tab-pane>
    </el-tabs>
    <div class="el-dialog-content">
      <dialog-employee-componet-vue ref="emp" @confirmEvent="dialogEmpConfirmEvent"></dialog-employee-componet-vue>
      <dialog-position-componet-vue ref="pos" @confirmEvent="dialogPostConfirmEvent"></dialog-position-componet-vue>
      <dialog-org-componet-vue ref="org" @confirmEvent="dialogOrgConfirmEvent" :expandAll="1 == 1"></dialog-org-componet-vue>
      <dialog-parameter-componet-vue
        ref="parameter"
        @confirmEvent="dialogParameterConfirmEvent"
        :expandAll="1 == 1"
      ></dialog-parameter-componet-vue>
      <dialog-unit-componet-vue
        ref="unit"
        @confirmEvent="dialogUnitConfirmEvent"
        :expandAll="1 == 1"
      ></dialog-unit-componet-vue>
    </div>
  </div>
</template>
<script>
let windowHeight = parseInt(window.innerHeight);
import reqVue from "../../utils/req.vue";
import DialogEmployeeComponetVue from "../DialogEmployeeComponet.vue";
import DialogPositionComponetVue from "../DialogPositionComponet.vue";
import DialogOrgComponetVue from "../DialogOrgComponet.vue";
import DialogParameterComponetVue from "../DialogParameterComponet.vue";
import DialogUnitComponetVue from "../DialogUnitComponet.vue";

export default {
  name: "field-propety",
  data() {
    var checkMax = (rule, value, callback) => {
      value = this.field.max;
      if (value === undefined || value === "" || value === null) {
        return callback(new Error(this.$t("errori18n.err_area_property_Rows")));
      } else {
        if (parseInt(value) > 10000) {
          return callback(
            new Error(this.$t("errori18n.err_area_property_Rows_greater"))
          );
        } else if (parseInt(value) <= 0) {
          return callback(
            new Error(this.$t("errori18n.err_area_property_Rows_greater"))
          );
        } else {
          callback();
        }
      }
    };
    var checkMin = (rule, value, callback) => {
      value = this.field.min;
      if (value === undefined || value === "" || value === null) {
        return callback(new Error(this.$t("errori18n.err_area_property_Rows")));
      } else {
        if (parseInt(value) > 1000) {
          return callback(
            new Error(this.$t("errori18n.err_area_property_Rows_greater"))
          );
        } else if (parseInt(value) <= 0) {
          return callback(
            new Error(this.$t("errori18n.err_area_property_Rows_greater"))
          );
        } else {
          callback();
        }
      }
    };
    var checkCNNanme = (rule, value, callback) => {
      value = this.field.cnName;
      if (value === undefined || value === "" || value === null) {
        return callback(
          new Error(this.$t("errori18n.err_field_property_CNName"))
        );
      } else {
        if (value.length > 15) {
          return callback(
            new Error(this.$t("errori18n.err_field_property_CNName_length"))
          );
        } else {
          callback();
        }
      }
    };
    var checkENNanme = (rule, value, callback) => {
      value = this.field.enName;
      if (value === undefined || value === "" || value === null) {
        return callback(
          new Error(this.$t("errori18n.err_field_property_ENName"))
        );
      } else {
        if (value.length > 30) {
          return callback(
            new Error(this.$t("errori18n.err_field_property_eNName_length"))
          );
        } else {
          callback();
        }
      }
    };
    return {
      fieldname: "field",
      loading: false,
      contentHeight: {
        height: ""
      },
      autoHeight: {
        height: "",
        width: "98%",
        margin: "11px",
        float: "left"
      },
      field: {},
      area: {},
      paramters: [], ///数据验证规则
      rules: {
        cnName: [{ required: true, trigger: "blur", validator: checkCNNanme }],
        enName: [{ required: true, trigger: "blur", validator: checkENNanme }],
        max: [{ required: true, trigger: "blur", validator: checkMax }],
        min: [{ required: true, trigger: "blur", validator: checkMin }]
      },
      regulars: [
        {
          required: null,
          trigger: null,
          min: null,
          max: null,
          pattern: null,
          message: null
        }
      ]
    };
  },
  methods: {
    ///设置窗台的高度
    getHeight() {
      this.autoHeight.height = windowHeight - 60 + "px";
      this.contentHeight.height = windowHeight - 170 + "px";
    },
    ///初始化字段属性
    InitProperty(areaproperty, fieldproperty) {
      this.area = areaproperty;
      this.field.areaId = fieldproperty.areaId;
      this.field.cnName = fieldproperty.cnName;
      this.field.conditions = fieldproperty.conditions;
      this.field.controlSouces = fieldproperty.controlSouces;
      this.field.controlsType = fieldproperty.controlsType;
      this.field.defaultValue = fieldproperty.defaultValue;
      this.field.editor = fieldproperty.editor;
      this.field.enName = fieldproperty.enName;
      this.field.fLength = fieldproperty.fLength;
      this.field.fieldCode = fieldproperty.fieldCode;
      this.field.fieldKey = fieldproperty.fieldKey;
      this.field.max = fieldproperty.max == 0 ? null : fieldproperty.max;
      this.field.min = fieldproperty.min == 0 ? null : fieldproperty.min;
      this.field.precisions =
        fieldproperty.precisions == 0 ? null : fieldproperty.precisions;
      this.field.regulars = fieldproperty.regulars;
      this.field.required = fieldproperty.required;
      this.field.selectType = fieldproperty.selectType;
      this.field.show = fieldproperty.show;
      this.field.type = fieldproperty.type + "";
      this.field.usable = fieldproperty.usable;
      if (
        fieldproperty.regulars != undefined &&
        fieldproperty.regulars.length > 0
      ) {
        this.regulars = [];
        fieldproperty.regulars.forEach(element => {
          this.regulars.push(JSON.parse(element.regulars));
        });
      }
      this.field.fieldValue = fieldproperty.fieldValue;
      this.field.fieldValues = fieldproperty.fieldValues;
      this.InitParameters();
    },
    ///初始化常用参数
    InitParameters() {
      this.query = {};
      this.query.page = 1;
      this.query.pageSize = 1000;
      this.query.useDisabledData = false;
      reqVue.$Post(this.query, "parameter/v1.0/pages").then(
        function(data) {
          if (data.status) {
            this.paramters = data.body.body;
          } else {
            this.$message.error(data.message);
            window.location.href = "/";
          }
        }.bind(this)
      );
    }, ///保存属性
    SaveEvent() {
      this.$refs["fieldpropety"].validate(valid => {
        if (valid) {
          if (
            this.field.controlsType == "employee" ||
            this.field.controlsType == "position" ||
            this.field.controlsType == "parameter" ||
            this.field.controlsType == "organizational"
          )
            this.field.defaultValue = this.field.fieldValue.join(",");
          this.field.regulars = [];
          this.regulars.forEach(element => {
            this.field.regulars.push({ regulars: JSON.stringify(element) });
          });
          this.regulars = [];
          this.$emit("FieldPropetryEvent", {
            area: this.area,
            field: this.field
          });
        } else {
          return false;
        }
      });
    },
    BackEvent() {
      this.area = {};
      this.fieldproperty = {};
      if (this.$refs["fieldpropety"]) this.$refs["fieldpropety"].resetFields();
      this.$emit("FieldPropetryEvent");
    },
    ///添加规则
    addRule() {
      this.regulars.push({
        required: null,
        trigger: "",
        min: null,
        max: null,
        pattern: "",
        message: ""
      });
    },
    ///删除规则
    deleteRule(rule) {
      console.log(rule);
      this.regulars.splice(rule.$index, 1);
      if (this.regulars.length == 0) {
        this.regulars.push({
          required: null,
          trigger: null,
          min: null,
          max: null,
          pattern: null,
          message: null
        });
      }
    },
    ///弹出常用参数
    dialogAddSystemControl(field) {
      if (field.controlsType == "employee") {
        let emps = [];
        field.fieldValues.forEach(element => {
          emps.push({
            empId: element.value,
            cnName: element.cnName,
            enName: element.enName
          });
        });
        this.$refs.emp.paramters = {
          fieldKey: {
            areaCode: field.areaCode,
            fieldKey: field.fieldKey,
            selectType: this.field.selectType
          },
          data: emps,
          exceptDataField: []
        };
        this.$refs.emp.dialogEmpVisible = true;
        this.$refs.emp.InitData();
      }
      if (field.controlsType == "position") {
        let pos = [];
        field.fieldValues.forEach(element => {
          pos.push({
            positionId: element.value,
            cnName: element.cnName,
            enName: element.enName
          });
        });
        this.$refs.pos.paramters = {
          fieldKey: {
            areaCode: field.areaCode,
            fieldKey: field.fieldKey,
            selectType: this.field.selectType
          },
          data: pos,
          exceptDataField: []
        };
        this.$refs.pos.dialogPosVisible = true;
        this.$refs.pos.InitData();
      }
      if (field.controlsType == "organizational") {
        let orgs = [];
        field.fieldValues.forEach(element => {
          orgs.push({
            id: element.value,
            cnName: element.cnName,
            enName: element.enName,
            orgCode: element.orgCode
          });
        });
        this.$refs.org.paramters = {
          fieldKey: {
            areaCode: field.areaCode,
            fieldKey: field.fieldKey,
            selectType: this.field.selectType
          },
          data: orgs,
          exceptDataField: []
        };
        this.$refs.org.showCheckBox = true;
        this.$refs.org.dialogOrgVisible = true;
        this.$refs.org.InitData();
      }
      if (field.controlsType == "unit") {
        let orgs = [];
        field.fieldValues.forEach(element => {
          orgs.push({
            unitId: element.value,
            cnName: element.cnName,
            enName: element.enName,
            unitCode: element.unitCode
          });
        });
        this.$refs.unit.paramters = {
          fieldKey: {
            areaCode: field.areaCode,
            fieldKey: field.fieldKey,
            selectType: this.field.selectType
          },
          data: orgs,
          exceptDataField: []
        };
        this.$refs.unit.showCheckBox = true;
        this.$refs.unit.dialogOrgVisible = true;
        this.$refs.unit.InitData();
      }
      if (field.controlsType == "parameter") {
        let parameter = [];
        field.fieldValues.forEach(element => {
          parameter.push({
            parameterCode: element.value,
            cnName: element.cnName,
            enName: element.enName
          });
        });
        this.$refs.parameter.paramters = {
          fieldKey: {
            areaCode: field.areaCode,
            fieldKey: field.fieldKey,
            selectType: this.field.selectType,
            parameterCode: field.controlSouces
          },
          data: parameter,
          exceptDataField: []
        };
        this.$refs.parameter.showCheckBox = true;
        this.$refs.parameter.dialogParameterVisible = true;
        this.$refs.parameter.InitData();
      }
    },
    ///弹出框返回赋值
    dialogEmpConfirmEvent(res) {
      this.field.fieldValues = [];
      this.field.fieldValue = [];
      res.result.forEach(re => {
        this.field.fieldValues.push({
          value: re.empId,
          cnName: re.cnName,
          enName: re.enName
        });
      });
      res.result.forEach(re => {
        this.field.fieldValue.push(re.empId);
      });
    },
    ///弹出职位框
    dialogPostConfirmEvent(res) {
      this.field.fieldValues = [];
      this.field.fieldValue = [];
      res.result.forEach(re => {
        this.field.fieldValues.push({
          value: re.positionId,
          cnName: re.cnName,
          enName: re.enName
        });
      });
      res.result.forEach(re => {
        this.field.fieldValue.push(re.positionId);
      });
    },
    ///弹出部门框
    dialogOrgConfirmEvent(res) {
      this.field.fieldValues = [];
      this.field.fieldValue = [];
      res.result.forEach(re => {
        this.field.fieldValues.push({
          value: re.orgId,
          cnName: re.cnName,
          enName: re.enName,
          orgCode: re.orgCode
        });
      });
      res.result.forEach(re => {
        this.field.fieldValue.push(re.orgId);
      });
    },
    dialogParameterConfirmEvent(res) {
      this.field.fieldValues = [];
      this.field.fieldValue = [];
      res.result.forEach(re => {
        this.field.fieldValues.push({
          value: re.parameterCode,
          cnName: re.cnName,
          enName: re.enName,
          parameterCode: re.parameterCode
        });
      });
      res.result.forEach(re => {
        this.field.fieldValue.push(re.parameterCode);
      });
    },
    ///弹出公司框
    dialogUnitConfirmEvent(res) {
      this.field.fieldValues = [];
      this.field.fieldValue = [];
      res.result.forEach(re => {
        this.field.fieldValues.push({
          value: re.unitId,
          cnName: re.cnName,
          enName: re.enName,
          unitCode: re.unitCode
        });
      });
      res.result.forEach(re => {
        this.field.fieldValue.push(re.unitId);
      });
    },
    clearValue(item) {
      this.field.fieldValues = this.field.fieldValues.filter(
        o => o.value !== item
      );
    }
  },
  mounted() {
    window.addEventListener("resize", this.getHeight);
    this.getHeight();
  },
  components: {
    DialogEmployeeComponetVue,
    DialogPositionComponetVue,
    DialogOrgComponetVue,
    DialogParameterComponetVue,
    DialogUnitComponetVue
  }
};
</script>
